<template>
  <div class="app-container">
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
      <el-button size="mini" class="btn-add" @click="handleAdd()" style="margin-left: 20px">添加</el-button>
    </el-card>
    <div class="table-container">
      <el-table ref="configItemTable"
                :data="list"
                style="width: 100%;"
                v-loading="listLoading" border>
        <el-table-column label="编号" width="100" align="center">
          <template slot-scope="scope">{{scope.row.id}}</template>
        </el-table-column>
        <el-table-column label="版本号" align="center"  width="100">
          <template slot-scope="scope">{{scope.row.versionNum}}</template>
        </el-table-column>
        <el-table-column label="版本名称" align="center" width="150">
          <template slot-scope="scope">{{scope.row.versionName}}</template>
        </el-table-column>

        <el-table-column label="是否强制更新" align="center" width="150">
          <template slot-scope="scope">
            <div v-if="scope.row.forceUpdateFlag==0">否</div>
            <div v-if="scope.row.forceUpdateFlag==1">是</div>
          </template>
        </el-table-column>

        <el-table-column label="下载链接" align="center">
          <template slot-scope="scope">{{scope.row.versionUrl}}</template>
        </el-table-column>

        <el-table-column label="更新说明" align="center">
          <template slot-scope="scope">
             <div v-text="scope.row.updateNote">
             </div>
          </template>
        </el-table-column>

        <el-table-column label="添加时间" width="160" align="center">
          <template slot-scope="scope">{{scope.row.createTime | formatDateTime}}</template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button size="mini"
                       type="text"
                       @click="handleUpdate(scope.$index, scope.row)">
              编辑
            </el-button>
            <el-button size="mini"
                       type="text"
                       @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :page-sizes="[10,15,20]"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog
      :title="isEdit?'编辑用户':'添加用户'"
      :visible.sync="dialogVisible"
      width="40%">
      <el-form :model="appVersionItem"
               ref="appVersionItemForm"
               label-width="150px" size="small">
        <el-form-item label="版本名称：" required>
          <el-input v-model="appVersionItem.versionName" style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item label="版本号：" required>
          <el-input v-model="appVersionItem.versionNum" style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item label="下载链接：" required>
          <el-input v-model="appVersionItem.versionUrl"
                    type="textarea"
                    :rows="5" style="width: 300px"></el-input>
        </el-form-item>

        <el-form-item label="更新类型：" required>
          <el-radio-group v-model="appVersionItem.forceUpdateFlag">
            <el-radio :label="0">不强制更新</el-radio>
            <el-radio :label="1">强制更新</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="更新内容：">
          <div class="edit_container">
            <quill-editor
              v-model="appVersionItem.updateNote"
              ref="myQuillEditor"
              :options="editorOption"
              @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
              @change="onEditorChange($event)">
            </quill-editor>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleDialogConfirm()" size="small">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
  import {versionList,updateVersion,addVersion,deleteAppVersion} from '@/api/appVersion';
  import {formatDate} from '@/utils/date';
  import { quillEditor } from "vue-quill-editor"; //调用编辑器
  import 'quill/dist/quill.core.css';
  import 'quill/dist/quill.snow.css';
  import 'quill/dist/quill.bubble.css';
  const defaultListQuery = {
    pageNum: 1,
    pageSize: 10,
    keyword: null
  };
  const defaultVersion = {
    id: null,
    versionName: null,
    versionNum: null,
    versionUrl: null,
    forceUpdateFlag:0,
    updateNote: null,
    platFrom:0,
    createTime:null,
    createUserId:0,
  };
  export default {
    name: 'appConfig',
    components:{
      quillEditor
    },
    computed: {
      editor() {
        return this.$refs.myQuillEditor.quill;
      },
    },
    data() {
      return {
        editorOption: {
          placeholder: "请在这里输入",
          modules:{
            toolbar:[
              ['bold', 'italic', 'underline', 'strike'],    //加粗，斜体，下划线，删除线
              ['blockquote', 'code-block'],     //引用，代码块
              [{ 'header': 1 }, { 'header': 2 }],        // 标题，键值对的形式；1、2表示字体大小
              [{ 'list': 'ordered'}, { 'list': 'bullet' }],     //列表
              [{ 'script': 'sub'}, { 'script': 'super' }],   // 上下标
              [{ 'indent': '-1'}, { 'indent': '+1' }],     // 缩进
              [{ 'direction': 'rtl' }],             // 文本方向
              [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
              [{ 'header': [1, 2, 3, 4, 5, 6, false] }],     //几级标题
              [{ 'color': [] }, { 'background': [] }],     // 字体颜色，字体背景颜色
              [{ 'font': [] }],     //字体
              [{ 'align': [] }],    //对齐方式
              ['clean'],    //清除字体样式
              ['image','video']    //上传图片、上传视频
            ]
          }
        },
        listQuery: Object.assign({}, defaultListQuery),
        list: null,
        total: null,
        listLoading: false,
        dialogVisible: false,
        appVersionItem: Object.assign({}, defaultVersion),
        isEdit: false,
        allocDialogVisible: false,
        allocRoleIds:[],
        allRoleList:[],
        allocAdminId:null
      }
    },
    created() {
      this.getList();
    },
    filters: {
      formatDateTime(time) {
        if (time == null || time === '') {
          return 'N/A';
        }
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
      }
    },
    methods: {
      onEditorReady(editor) { // 准备编辑器

      },
      onEditorBlur(){}, // 失去焦点事件
      onEditorFocus(){}, // 获得焦点事件
      onEditorChange(){}, // 内容改变事件
      escapeStringHTML(str) {
        str = str.replace(/&lt;/g,'<');
        str = str.replace(/&gt;/g,'>');
        return str;
      },

      handleResetSearch() {
        this.listQuery = Object.assign({}, defaultListQuery);
      },
      handleSearchList() {
        this.listQuery.pageNum = 1;
        this.getList();
      },
      handleSizeChange(val) {
        this.listQuery.pageNum = 1;
        this.listQuery.pageSize = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.pageNum = val;
        this.getList();
      },
      handleAdd() {
        this.dialogVisible = true;
        this.isEdit = false;
        this.appVersionItem = Object.assign({},defaultVersion);
      },
      handleUpdate(index, row) {
        this.dialogVisible = true;
        this.isEdit = true;
        this.appVersionItem = Object.assign({},row);
        console.log("修改的对象",this.appVersionItem);
        this.appVersionItem .updateNote = this.escapeStringHTML(this.appVersionItem.updateNote);
      },

      handleDelete(index, row) {
        this.$confirm('是否要删除该记录?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteAppVersion(row.id).then(response => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getList();
          });
        });
      },

      handleDialogConfirm() {
        this.$confirm('是否要确认?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if (this.isEdit) {
            updateVersion(this.appVersionItem).then(response => {
              this.$message({
                message: '修改成功！',
                type: 'success'
              });
              this.dialogVisible =false;
              this.getList();
            })
          } else {
            addVersion(this.appVersionItem).then(response => {
              this.$message({
                message: '添加成功！',
                type: 'success'
              });
              this.dialogVisible =false;
              this.getList();
            })
          }
        })
      },
      getList() {
        this.listLoading = true;
        versionList(this.listQuery).then(response => {
          this.listLoading = false;
          this.list = response.data.list;
          this.total = response.data.total;
        });
      },
    }
  }
</script>
<style></style>


